<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm dict-form">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="权限名称" prop="permissionName">
            <el-input v-model="formData.permissionName" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="权限代码" prop="permissionCode">
            <el-input v-model="formData.permissionCode" disabled="disabled" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="权限分组" prop="groupName">
            <el-input v-model="formData.groupName" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="权限排序" prop="sort">
            <el-input-number v-model="formData.sort" :min="1" :max="10000" label="权限排序"></el-input-number>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-form-item label="备注" prop="remark">
      <el-input v-model="formData.remark" type="textarea" />
    </el-form-item>
    <el-form-item style="text-align: center;">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button @click="$router.back(-1)">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {getDataById, save} from '@/api/sys/auth/permission/index'

  export default {
  data() {
    return {
      formData: {
        permissionName: '',
        permissionCode: '',
        groupName: '',
        remark: '',
        id: this.$route.query.id,
        sort: 1
      },
      rules: {
        permissionName: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
        permissionCode: [
          { required: true, message: '请输入权限代码', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
        groupName: [
          { required: true, message: '请输入权限分组', trigger: 'blur' },
          { min: 3, max: 36, message: '长度在 3 到 36 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请填写字典备注', trigger: 'blur' }
        ],
        sort: [
          { required: false, message: '请填写排序', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.formData).then(() => {
            this.loading = false
            this.$router.push({ name: 'permission_mgr_list' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getData() {
      if (this.$route.query.id) {
        getDataById(this.$route.query.id).then((res) => {
          this.formData = res.data
        })
      } else {
        this.$router.push({ name: 'permission_mgr_list' })
      }
    }
  }
}
</script>

<style scoped>
.dict-form{
  padding-top: 30px;
  padding-right: 30px;
}
</style>
